<!DOCTYPE html>
<html>
<head>
	<title>商品详情</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" type="text/css" href="../css/common/reset.css">
	<link rel="stylesheet" type="text/css" href="../css/productDetail.css">
	<link rel="stylesheet" type="text/css" href="../css/common/swiper-3.4.2.min.css">
	<script type="text/javascript" src="../js/common/flexible.js"></script>
	<style type="text/css">
		.blue-slide {
			background: #4390EE;
		}
		.red-slide {
			background: #CA4040;
		}
		.orange-slide {
			background: #FF8604;
		}
		.swiper-container{
			height: 100%;
			width: 100%;
		}
		.swiper-slide {
			line-height: 16rem;
			color: #fff;
			font-size: 36px;
			text-align: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
			height: 100%;
			width: 100%;
		}
		.swiper-slide img{
			height: 100%;
			width: 100%;
		}
		.nav_bar{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			height: 1.9195rem;
			z-index: 2;
		}
		.nav_item{
			display: flex;
			height: 100%;
			padding: 0 .32rem;
			-webkit-box-align: center;
			-webkit-align-items: center;
			-ms-flex-align: center;
			align-items: center;
		}
		.nav_item img{
			height: 1.2795rem;
			width: 1.2795rem;
		}
		.nav_bar .center{
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			-webkit-box-align:center;
			-webkit-align-items:center;
			-ms-flex-align:center;
			align-items:center;
			-webkit-box-pack:center;
			-webkit-justify-content:center;
			-ms-flex-pack:center;
			justify-content: center;
		}
	</style>
</head>
<body>
	<!-- 滑动后显示的顶部 -->
	<div class="slide_nav">
		<div class="nav_bar">
			<div class="nav_item" onclick="hideComment()"><img src="../img/left.png"></div>
			<div class="nav_item center"><div class="center_img"><img src=""></div></div>
			<div class="nav_item"><a href="shoppingCart.html"><img src="../img/cart.png"></a></div>
		</div>
		<div class="nav_specify">
			<p>电影</p>
			<p>评价</p>
			<p>详情</p>
			<p>推荐</p>
		</div>
	</div>
	<!-- 评论页面 -->
	<div class="comment_container">
		<div class="gray_background">
			<div class="rate_header">
				<ul class="comment_navigation">
					<li class="active"><a href="##">全部</a></li>
					<li><a href="##">好评</a></li>
					<li><a href="##">中评</a></li>
					<li><a href="##">差评</a></li>
				</ul>
			</div>
			<div class="rete_single">
				<ul>
					<li class="single_comment">
						<div class="customer_info">
							<span><img src=""></span>
							<span>啊**5</span>
							<span>三星买家</span>
						</div>
						<div class="rate_info">
							<p>我的傻儿子让我买的</p>
							<p class="">颜色分类:895320男鞋 烟台XB现货;鞋码:42</p>
						</div>
						<ul class="img_container">
							<li class="img_container_li"><a href="##"><img src=""></a></li>
							<li class="img_container_li"><a href="##"><img src=""></a></li>
							<li class="img_container_li"><a href="##"><img src=""></a></li>
						</ul>
					</li>
					<li class="single_comment">
						<div class="customer_info">
							<span><img src=""></span>
							<span>啊**5</span>
							<span>三星买家</span>
						</div>
						<div class="rate_info">
							<p>我的傻儿子让我买的</p>
							<p class="">颜色分类:895320男鞋 烟台XB现货;鞋码:42</p>
						</div>
						<ul class="img_container">
							<li class="img_container_li"><a href="##"><img src=""></a></li>
							<li class="img_container_li"><a href="##"><img src=""></a></li>
							<li class="img_container_li"><a href="##"><img src=""></a></li>
						</ul>
					</li>
					<li class="single_comment">
						<div class="customer_info">
							<span><img src=""></span>
							<span>啊**5</span>
							<span>三星买家</span>
						</div>
						<div class="rate_info">
							<p>我的傻儿子让我买的</p>
							<p class="">颜色分类:895320男鞋 烟台XB现货;鞋码:42</p>
						</div>
						<ul class="img_container">
							<li class="img_container_li"><a href="##"><img src=""></a></li>
							<li class="img_container_li"><a href="##"><img src=""></a></li>
							<li class="img_container_li"><a href="##"><img src=""></a></li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="line">
				<div>
					<p>没有更多评论了</p>
				</div>
			</div>
		</div>
	</div>
	<!-- 主体 -->
	<div class="container">
		<!-- 轮播图 -->
		<div class="myFocus">
			<div class="nav_bar">
				<div class="nav_item" onclick="javascript:history.go(-1);"><img src="../img/left.png"></div>
				<div class="nav_item center"></div>
				<div class="nav_item"><a href="shoppingCart.html"><img src="../img/cart.png"></a></div>
			</div>
			<div class="swiper-container">
			    <div class="swiper-wrapper">
					<div class="swiper-slide blue-slide"></div>
					<div class="swiper-slide red-slide"></div>
					<div class="swiper-slide orange-slide"></div>
				</div>
			    <div class="swiper-pagination"></div>
			</div>
		</div>
		<!-- 商品详情介绍 -->
		<div class="production_description">
			<h3 class="prot_name"></h3>
			<p class="prot_whole_name"></p>
			<p class="new_price" data-symbol="评分:"><span></span></p>
			<p class="old_price"><span></span></p>
			<p class="postage_sales"><span class="postage"></span><span class="sales_volume"></span></p>
		</div>
		<!-- 按钮 -->
		<div class="container_btn_box">
			<p>请选择 购票</p>
			<div class="arrowright"></div>
		</div>
		
		<div class="line">
			<div>
				<p><img src="../img/chat.png">评价</p>
			</div>
		</div>

		<!-- 宝贝评价 -->
		<div class="rate">
			<div class="rate_header"><h3>电影评价(3)</h3></div>
			<div class="rete_single">
				<ul>
					<li>
						<div class="customer_info">
							<span><img src=""></span>
							<span>啊**5</span>
							<span>三星买家</span>
						</div>
						<div class="rate_info">
							<p>我的傻儿子让我买的</p>
							<p class="">颜色分类:895320男鞋 烟台XB现货;鞋码:42</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="rate_btn"><p class="rete_btn_single">查看全部评价</p></div>
		</div>
		
		<div class="line">
			<div>
				<p><img src="../img/img.png">电影简介</p>
			</div>
		</div>

		<!-- 商品证书 -->
		<!-- <div class="production_detailInfo">
			<div class="production_detailInfo_left">
				<p>生产许可证编号:sc11453010306856</p>
				<p>厂址:昆明市盘龙区双龙街道办事处庄房</p>
				<p>储藏方法:在通风干燥无异味的环境下存放</p>
				<p>净含量:300g</p>
				<p>系列:倚玛留香</p>
				<p>级别:一级</p>
				<p>省份:云南省</p>
			</div>
			<div class="production_detailInfo_right">
				<p>产品标准号:GB/T 13738.2-2008</p>
				<p>保质期:1095天</p>
				<p>包装方法:散装</p>
				<p>是否为有机食品:否</p>
				<p>生长季节:春季</p>
				<p>城市:临沧市</p>
				<p>套餐分量:1人</p>
				<p>价格段:60-99元</p>
			</div>
		</div> -->
		<!-- 图片介绍 -->
		<div class="prot_img">
			<ul>
				<li class="prot_img_single">
					<img src="">
				</li>
				<li class="prot_img_single">
					<img src="">
				</li>
			</ul>
		</div>

		<div class="line">
			<div>
				<p><img src="../img/goods.png">同类电影推荐</p>
			</div>
		</div>

		<!-- 相关推荐 -->
		<div class="list">
			
		</div>
		
		<div class="line">
			<div>
				<p>已经到底了</p>
			</div>
		</div>
	</div>

	<!-- 底部 -->
	<div class="productDetail_bottom">
		<ul class="productDetail_bottom_container">
			<li class="productDetail_bottom_item">
				<ul class="productDetail_bottom_container_ul">
					<li class="myCollection border">
						<img src="../img/shop.png">
						<p>店铺</p>
					</li>
					<li class="myCollection border">
						<img src="../img/service_staff.png">
						<p>客服</p>
					</li>
					<li class="myCollection">
						<img src="../img/start.png">
						<p>收藏</p>
					</li>
				</ul>
			</li>
			<li class="putIn_shopping_cart productDetail_bottom_item">
				前往评分
			</li>
			<li class="buy_now productDetail_bottom_item">
				立即购买
			</li>
		</ul>
	</div>

	<!-- 弹出层 -->
	<div class="layerout layerhide">
		<div class="close_shadow"></div>
		<div class="main_box">
			<div class="main">
				<div>
					<div class="layer_pro">
						<div class="pro_img">
							<img src="">
						</div>
						<div class="pro_info">
							<div>
								<p class="pro_info_price" data-symbol="￥">699</p>
								<p>库存:1</p>
								<p class="pro_info_selected">
									<span>已选:40.5-26cm 烟台2号仓</span>
								</p>
							</div>
						</div>
						<div class="pro_close"></div>
					</div>
				</div>
				<div class="layer_info">
					<div class="info_size">
						<h2>鞋码</h2>
						<ul>
							<li class="disabled">37-23cm</li>
							<li class="sel">40.5-26cm</li>
							<li class="disabled">37-23cm</li>
							<li class="disabled">40.5-26cm</li>
						</ul>
					</div>
					<div class="info_color">
						<h2>颜色分类</h2>
						<ul>
							<li class="disabled">2号仓</li>
							<li class="sel">3号仓</li>
							<li class="disabled">烟台XBIN2现货</li>
							<li class="disabled">未知地域仓</li>
						</ul>
					</div>
					<div class="info_num">
						<h2>购买数量</h2>
						<p class="btn_minus off"></p>
						<p class="btn_input"><input type="tel" name="" value="1"></p>
						<p class="btn_plus"></p>
					</div>
				</div>
				<div>
					<div class="layer_bottom">
						<div class="layer_bottom_addcart">加入购物车</div>
						<div class="layer_bottom_gobuy">立即购买</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/common/swiper.min.js"></script>
	<script type="text/javascript">
		var mySwiper = new Swiper('.swiper-container',{
			loop: true,
		    autoplay : 5000,
		    // 如果需要分页器
		    pagination: '.swiper-pagination',
		    autoplayDisableOnInteraction : false,
		});
		// 显示选择商品弹出层
		var closebtn = document.getElementsByClassName("pro_close");
		var container_btn_box = document.getElementsByClassName("container_btn_box");
		closebtn[0].addEventListener("click", togglelayer);
		function togglelayer(){
			var layer = document.getElementsByClassName("layerout");
			if (layer[0].classList.contains("layershow")) {
				layer[0].classList.remove("layershow");
			}
			else {
				layer[0].classList.add("layershow");
			}
		}
		container_btn_box[0].addEventListener("click", togglelayer);
		/*显示更多评价*/
		var rate_btn = document.getElementsByClassName("rete_btn_single");
		var comment_container = document.getElementsByClassName("comment_container");
		rate_btn[0].addEventListener("click", function() {
			comment_container[0].classList.add("comment_container_show");
		});
		function hideComment() {
			var classList = comment_container[0].classList;
			classList.contains("comment_container_show")?classList.remove("comment_container_show"):window.history.go(-1);
		}
		var classList = comment_container[0].classList;
		window.onload = function() {
			// 控制头部显示
			var slide_nav = document.getElementsByClassName("slide_nav")[0];
			var img_height = document.getElementsByClassName("swiper-container")[0].offsetHeight;
			document.addEventListener("scroll", function() {
				var bodyScrollTop = document.body.scrollTop;
				var opacity = (bodyScrollTop/(img_height-180)).toFixed(1);
				slide_nav.style.opacity = opacity;
				// bodyScrollTop>0?slide_nav.classList.add("slide_nav_show")
				// 		:!classList.contains("comment_container_show")?slide_nav.classList.remove("slide_nav_show"):console.log("aa");
			});
		};
	</script>
	<script type="text/javascript" src="../js/common/jquery-3.1.0.min.js"></script>
	<script type="text/javascript" src="../js/common/layer/layer.js"></script>
	<script type="text/javascript" src="../js/sfDom.js"></script>
	<script type="text/javascript" src="../js/productDetail.js"></script>
</body>
</html>